<template>
	<view>
		<view class="mask-content">
			<view class="pay-top">
				<view class="price color-red">
					￥
					<text class="em">{{ summoney }}</text>
				</view>

			</view>
			<!-- 优惠券页面，仿mt -->
			<view class="coupon-box">
				<view class="coupon-item flex space-between" v-for="(item, index) in list" :key="index"
					@click="checkboxChange(index)">
					<view class="pay-left flex">
						<image :src="item.src" mode=""></image>
						<view class="des">
							<text class="titles">{{ item.title }}</text>

						</view>
					</view>
					<view class="check-box">
						<image src="https://api.sqc168.com.cn/jqshop/static/select.png" v-if="!item.checked"
							style="width: 20px;height: 20px;" />
						<image src="https://api.sqc168.com.cn/jqshop/static/selected.png" v-if="item.checked"
							style="width: 20px;height: 20px;" />

					</view>
				</view>
				<view class="btn-box" @click="confirm()">
					<div class="btn">完成</div>
				</view>

				
			</view>
		</view>

		

	</view>
</template>

<script>
	
	export default {
		components: {

		
		},
		data() {
			return {
				
				disabled: false,

				sendState: false,
				currentIndexs: 0,
				txt_hour: '00',
				txt_minutes: '30',
				txt_secounds: '00',

				paymoney: 0,
				paybalance: 0,
				paycouponmoney: 0,

				summoney: 0,
				balance: 0,
				couponmoney: 0,

				userinfo: {},
				paypass: '',
				passshow: false,

				ishd: 0,
				iscard: 0,
				payway: '',
				paytype: 3,
				orderNum: '',
				list: [{
					title: '支付',
					type: 4,
					src: 'https://api.sqc168.com.cn//static/img/teared.png',
					checked: true
				}],
				type: 1,
				show_key: false, //false

			};
		},
		onLoad(option) {
			console.log(option);
			// if (str.indexOf('type') >= 0 && option.type == 1) {

			this.getInfo();

			let item = this.list.filter(item => item.checked);

			this.paytype = item[0].type;
			
			//商品数据
			this.summoney = option.summoney;
			this.orderNum = option.ordernum;
			this.type = option.type;
			console.log(this.orderNum);
			this.countDown();
			//this.getUiStyle();
		},
		onShow() {

			setTimeout(() => {
				this.getorderInfo();
			}, 1000);
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				this.sendState = !this.sendState;
				return false;
			}
			this.back();
			return true;
		},
		methods: {
		
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			
			
			
			getorderInfo() {
				//this.countDown();
				uni.request({
					url: 'https://api.sqc168.com.cn/api/index_new/gethbOrderstatus',
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					data: {
						shop_id: uni.getStorageSync('bhhx_shopid'),
						userid: uni.getStorageSync('bhhx_xcx_uid'),
						oid: this.orderNum
					},
					method: 'POST',
					success: res => {
						console.log(res);
						if (res.data.code == 200) {
							if (res.data.data.status == 1) {
								uni.redirectTo({
									url: '/mypackage/pages/newadd/pay?type=0&ordernum=' +
										this.orderNum
								});
							}
							if (res.data.data.status == 5) {
								uni.reLaunch({
									url: '/pages/index/index'
								});
							}
						}


					},
					fail: res => {
						//console.log(res);
					}
				});
			},
			countDown() {
				let clock = setInterval(() => {
					this.txt_secounds--;
					if (this.txt_minutes > 0) {
						if (this.txt_secounds <= 0) {
							this.txt_secounds = 59;
							this.txt_minutes--;

						}
					} else {
						if (this.txt_secounds <= 0) {

						}
					}
					if (this.txt_hour == 0 && this.txt_secounds == 0 && this.txt_minutes == 0) {
						this.updateOrder(5);
						// uni.navigateBack({});
					}
				}, 1000);
			},

			back() {
				uni.navigateBack({
					// delta: 2
				});
			},
			reback() {
				this.back();
			},

			checkboxChange(index) {
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].checked = false;
					if (index == i) {
						this.list[i].checked = true;
						this.paytype = this.list[i].type;
					}
				}

			},

			


		}
	};
</script>

<style lang="scss">
	page {
		// background: $page-color-base;
		padding-bottom: 100upx;
		background-color: #f8f8f8;

	}

	.pay-top {
		padding: 30upx;
		box-sizing: border-box;
		// border-bottom: 2upx solid $border-color-base;

		border-bottom: 1px solid #dddddd;

		font-size: 12upx;
		// color: #191E2A;
		color: #000000;

		text-align: center;

		.price {
			font-weight: bold;

			.em {
				font-size: 70upx;
			}
		}
	}

	.mask-content {
		width: 100%;
		// background-color: #FFFFFF;
		background-color: #ffffff;

		margin-top: 30upx;

		.title {
			height: 90upx;
			line-height: 90upx;
			border-bottom: 2upx solid #eee;
			font-size: 12px;
			color: #191e2a;
			overflow: hidden;
			background-color: #fff;
			border-radius: 16upx 16upx 0 0;
			text-align: center;
			padding: 0 30upx;
			box-sizing: border-box;
			position: relative;
			font-weight: bold;

			image {
				width: 26upx;
				height: 26upx;
				position: absolute;
				right: 30upx;
				top: 50%;
				margin-top: -13upx;
			}
		}
	}

	/* 优惠券列表 */
	.coupon-box {
		padding: 0 30upx;
		box-sizing: border-box;

		.btn-box {
			padding: 80upx 0;
			box-sizing: border-box;
			text-align: center;

			.btn {
				font-size: 0.4266666666666667rem;
				border-radius: 20upx;
				box-shadow: 0 6upx 30upx red;
				line-height: 96upx;
				background: -webkit-linear-gradient(left, #ff5367, red);
				background: -o-linear-gradient(right, #ff5367, red);
				background: -moz-linear-gradient(right, #ff5367, red);
				background: linear-gradient(to right, #ff5367, red);
				font-size: 12px;
				color: #fff;
			}
		}
	}

	.coupon-item {
		display: flex;
		background: none;
		padding: 30upx 0;
		// border-bottom: 2upx solid $border-color-base;

		border-bottom: 1px solid #dddddd;

		.pay-left {
			image {
				width: 50upx;
				height: 50upx;
			}

			.des {
				padding-left: 30upx;

				.titles {
					font-size: 12px;
					// color: #191E2A;
					color: #000000;

				}

				.h2 {
					font-size: 12px;
					color: #9fa0a5;
				}
			}
		}

		.check-box {
			padding-right: 0;
		}
	}

	.send-box {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;

		.send-content {
			height: 100%;
			justify-content: center;

			.send-content-text {
				background-color: #ffffff;
				position: relative;
				z-index: 6;
				width: 80%;
				max-width: 80%;
				border-radius: 16upx;

				.title {
					height: 84upx;
					line-height: 84upx;
					border-bottom: 2upx solid #eee;
					font-size: 12px;
					color: #333;
					overflow: hidden;
					background-color: #f8f8f8;
					border-radius: 16upx 16upx 0 0;
					text-align: center;
					padding: 0 30upx;
					box-sizing: border-box;
					position: relative;

					image {
						width: 32upx;
						height: 32upx;
						position: absolute;
						right: 30upx;
						top: 50%;
						margin-top: -16upx;
					}
				}

				.send-content-des {
					padding: 40upx 0;
					font-size: 0;
					text-align: center;
					font-size: 12px;
					text-align: center;
					padding: 30upx 20upx;

					.h1 {
						font-size: 12px;
						color: #ccc;
						text-align: center;
					}
				}

				.btn-box {
					font-size: 12px;
					text-align: center;
					line-height: 96upx;
					border-top: 2upx solid red;

					.btn-left-send {
						// @include flexible(1);
						border-right: 2upx solid red;
					}

					.btn-right-send {
						// @include flexible(1);
						color: red;
					}
				}
			}
		}
	}

	.mask {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		z-index: 2;
	}


	// 弹窗样式
	.dialog {
		.mask {
			position: fixed;
			left: 0;
			top: 0;
			background: #000;
			opacity: 0.5;
			z-index: 1;
			width: 100%;
			height: 100%;
		}

		.attr-content {
			position: fixed;
			z-index: 2;
			bottom: 0;
			padding-bottom: var(--safe-area-inset-bottom);
			;
			background-color: #ffffff;
			width: 100%;
			border-radius: 10px 10px 0 0;

			.attr-title {
				text-align: center;
				width: 100%;
				font-size: 36upx;
				font-family: SourceHanSansSC;
				font-weight: bold;
				color: #d5191d;
				height: 30px;
				line-height: 30px;
				margin-bottom: 30upx;
			}

			.attr-spec-box {
				padding: 0 30upx;
				max-height: 300px;
			}

			.productActive {

				background: red;
				border: 2px solid red;
				border-radius: 20upx;
			}

			.cardlist {
				width: 100%;
				margin-bottom: 30upx;
				font-size: 28upx;
				border-radius: 10px;

				&.card_jj {
					background-color: #b8a762;
				}

				&.card_dj {
					background-color: #d81e06;
				}

				.top {
					background-color: #b5b5b5;
					color: #fff;
					padding: 20upx;
					box-sizing: border-box;
					border-top-left-radius: 20upx;
					border-top-right-radius: 20upx;

				}

				.bottom {

					// text-align: center;
					color: #fff;
					padding: 30upx 20upx 60upx 20upx;
					padding: 30upx 20upx;
					box-sizing: border-box;

					.bottom-item {
						height: 30px;
						line-height: 30px;
					}

				}

				.btn-unbindCard {
					position: absolute;
					right: 25px;
				}
			}

			.btn-fh1 {
				line-height: 1.2;
				margin-top: 10px;
				text-align: center;
				color: #ffffff;
				width: 180upx;
				border-radius: 20px;
				background-color: #d5191d;
				padding: 10upx 0;
				font-size: 28upx;
				margin: 40upx auto;
			}
		}

		.express-content {
			width: calc(100% - 60px);
			// height: 70%;
			padding: 15px;
			border-radius: 10px;
			background-color: #ffffff;

			top: 50%;
			left: 50%;
			position: fixed;
			z-index: 2;

			transform: translate(-50%, -50%);
		}

		.express-title {
			text-align: center;
			width: 100%;
			font-size: 36upx;
			font-family: SourceHanSansSC;
			font-weight: bold;
			color: #d5191d;
			line-height: 36upx;
			margin-bottom: 30upx;
		}


		.btn-fh {
			line-height: 1.2;
			margin-top: 10px;
			text-align: center;
			color: #ffffff;
			width: 180upx;
			border-radius: 20px;
			background-color: #d5191d;
			padding: 10upx 0;
			font-size: 28upx;
			margin: 40upx auto 0;
		}

		.express-tips {
			width: 100%;
			text-align: center;
			margin: 5px 0 0 0;
			font-size: 18upx;
			font-family: SourceHanSansSC;
			font-weight: 400;
			color: #BDAA63;
			line-height: 36upx;
		}

		.express-input {
			width: 100%;
			flex: 1;
			padding: 0 10px;
			height: 40px;
			line-height: 40px;
			border-radius: 10px;
			border: 1px solid #d5191d;

			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1; //需要控制的文本行数
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			// height: 40px;
			// line-height: 40px;

			display: flex;
			align-items: center;

			.btn-send {
				text-align: center;
				color: #ffffff;
				width: 75px;
				border-radius: 15px;
				height: 30px;
				line-height: 30px;
				background-color: #d5191d;
				text-align: center;
				font-size: 24upx;
				margin-left: 40upx;
			}

			input {
				flex: 1;
			}
		}
	}
</style>